<template>
    <el-form-item label="" style="margin-bottom:12px" :key="rush">
        <div class="tk_coll_box" :class="{'open':dataForm.adgroup.audience[dataForm.audience_index].actions[0].is_show}">
            <div class="tk_coll_head flexbox flexcenter" @click="changeIscoll">
                <i class="el-icon-circle-plus-outline"></i>
                <div class="tk_coll_head_conter flex">
                    <div class="tch_title">添加行为：视频互动</div>
                    <div class="tch_text" v-if="dataForm.adgroup.audience[dataForm.audience_index].actions[0].action_category_ids.length>0">已选择{{dataForm.adgroup.audience[dataForm.audience_index].actions[0].action_category_ids.length}}种行为类别</div>
                    <div class="tch_text" v-else>根据用户在TikTok上与视频的互动行为进行定向。</div>
                </div>
                <i class="el-icon-delete" @click.stop="deleteAll" v-if="isDelete"></i>
            </div>
            <div class="tk_coll_content" v-show="dataForm.adgroup.audience[dataForm.audience_index].actions[0].is_show">
                <el-form-item label="定义他们与视频的互动方式" :prop="`adgroup.audience.${dataForm.audience_index}.actions.${0}.video_user_actions`" :rules="{required: isShow?true:false, message: '请选择', trigger: ['blur', 'change']}" style="margin-bottom:18px">
                    <el-checkbox-group v-model="dataForm.adgroup.audience[dataForm.audience_index].actions[0].video_user_actions" @change="sessionSave">
                        <el-checkbox label="WATCHED_TO_END">看完</el-checkbox>
                        <el-checkbox label="LIKED">点赞</el-checkbox>
                        <el-checkbox label="COMMENTED">评论</el-checkbox>
                        <el-checkbox label="SHARED">分享</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="选择他们与哪些类别的视频有过互动" :prop="`adgroup.audience.${dataForm.audience_index}.actions.${0}.action_category_ids`" :rules="{required: isShow?true:false, message: '请选择', trigger: ['blur', 'change']}" style="margin-bottom:18px">
                    <div class="tk_tag_box" v-if="dataForm.adgroup.audience[dataForm.audience_index].actions[0].action_category_ids.length>0">
                        <el-tag type="info" v-for="(tag,index) in dataForm.adgroup.audience[dataForm.audience_index].actions[0].action_category_ids" :key="tag.action_category_id" closable size="mini" @close="deleteTag(tag,index)">
                            {{tag.name}}
                        </el-tag>
                    </div>
                    <el-popover placement="right" width="222" trigger="click">
                        <el-input size="small" slot="reference" placeholder="请输入要搜索的分类" clearable suffix-icon="el-icon-search" v-model="filterText">
                        </el-input>
                        <el-tree :default-checked-keys="defaultCheck" :filter-node-method="filterNode" :props="props" node-key="action_category_id" ref="tree" :data="actionData" show-checkbox @check-change="handleCheckChange">
                        </el-tree>
                    </el-popover>
                </el-form-item>
                <el-form-item label="选择n天内发生的行为" :prop="`adgroup.audience.${dataForm.audience_index}.actions.${0}.action_period`" :rules="{required: isShow?true:false, message: '请选择', trigger: ['blur', 'change']}" style="margin-bottom:18px">
                    <el-radio-group v-model="dataForm.adgroup.audience[dataForm.audience_index].actions[0].action_period" @change="sessionSave">
                        <el-radio :label="7">7天</el-radio>
                        <el-radio :label="15">15天</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        indexRush(val) {
            this.rush++;
        },
    },
    data() {
        return {
            actionData: [],
            is_show: false,
            props: {
                label: "name",
                children: "sub_category",
            },
            filterText: "",
            rush: 0,
        };
    },
    created() {
        this.getAction();
    },
    computed: {
        defaultCheck() {
            return this.dataForm.adgroup.audience[
                this.dataForm.audience_index
            ].actions[0].action_category_ids.map((item) => {
                return item.action_category_id;
            });
        },

        isDelete() {
            let is_show = false;
            if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_category_ids.length > 0 ||
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].video_user_actions.length > 0 ||
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_period
            ) {
                is_show = true;
            }
            return is_show;
        },

        isShow() {
            let is_show = true;
            if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_category_ids.length > 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].video_user_actions.length > 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_period
            ) {
                is_show = false;
            } else if (
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_category_ids.length <= 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].video_user_actions.length <= 0 &&
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_period == ""
            ) {
                is_show = false;
            }
            return is_show;
        },

        indexRush() {
            return this.dataForm.audience_index;
        },
    },
    methods: {
        //获取行为
        async getAction() {
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/actionList",
                {
                    advertiser_id: this.dataForm.base[0].advertiser_id,
                    action_scene: "VIDEO_RELATED",
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.actionData = res.data;
            }
        },

        getSimpleCheckedNodes(store) {
            const checkedNodes = [];
            const traverse = function (node) {
                const childNodes = node.root
                    ? node.root.childNodes
                    : node.childNodes;
                childNodes.forEach((child) => {
                    if (child.checked) {
                        checkedNodes.push(child.data);
                    }
                    if (child.indeterminate) {
                        traverse(child);
                    }
                });
            };
            traverse(store);
            return checkedNodes;
        },

        handleCheckChange() {
            // this.dataForm.adgroup.audience[
            //     this.dataForm.audience_index
            // ].actions[0].action_category_ids = this.getSimpleCheckedNodes(
            //     this.$refs.tree.store
            // );

            this.dataForm.adgroup.audience[
                this.dataForm.audience_index
            ].actions[0].action_category_ids =
                this.$refs.tree.getCheckedNodes(true);
            this.sessionSave();
        },

        deleteTag(item, index) {
            this.dataForm.adgroup.audience[
                this.dataForm.audience_index
            ].actions[0].action_category_ids.splice(index, 1);
            this.$refs.tree.setCheckedNodes(
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_category_ids
            );
            this.sessionSave();
        },

        // 清空
        deleteAll() {
            this.dataForm.adgroup.audience[
                this.dataForm.audience_index
            ].actions[0].action_category_ids = [];
            this.dataForm.adgroup.audience[
                this.dataForm.audience_index
            ].actions[0].video_user_actions = [];
            this.dataForm.adgroup.audience[
                this.dataForm.audience_index
            ].actions[0].action_period = "";
            this.$refs.tree.setCheckedNodes(
                this.dataForm.adgroup.audience[this.dataForm.audience_index]
                    .actions[0].action_category_ids
            );
            this.sessionSave();
        },

        changeIscoll() {
            if (this.isShow) {
                this.dataForm.adgroup.audience[
                    this.dataForm.audience_index
                ].actions[0].is_show = true;
                this.$message.error("请先完善当前视频互动行为！");
            } else {
                this.dataForm.adgroup.audience[
                    this.dataForm.audience_index
                ].actions[0].is_show =
                    !this.dataForm.adgroup.audience[
                        this.dataForm.audience_index
                    ].actions[0].is_show;
            }
            this.sessionSave();
        },

        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },

        // resetData(list, level) {
        //     let arr = [];
        //     list.forEach((item) => {
        //         if (item.children && item.level == level) {
        //         }
        //     });
        // },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
};
</script>


<style scoped>
.el-tree {
    height: 300px;
    overflow-y: auto;
}
.tk_coll_box {
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: 0.4s;
    width: 400px;
    overflow: hidden;
    margin-bottom: 12px;
}
.tk_coll_box:hover,
.tk_coll_box.open {
    border: 1px solid #4475ff;
}
.tk_coll_head {
    height: 65px;
    background: rgba(165, 177, 209, 0.1);
    padding: 0 20px;
    cursor: pointer;
}
.tk_coll_head .el-icon-circle-plus-outline,
.tk_coll_head .el-icon-delete {
    flex-shrink: 0;
    font-size: 18px;
    color: #616c85;
}
.tk_coll_head_conter {
    margin: 0 12px;
}
.tch_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tch_text {
    font-size: 12px;
    color: #b4b7bd;
    margin-top: 4px;
}
.tk_coll_content {
    padding: 20px 20px 0 20px;
}
.tk_tag_box {
    margin-bottom: 12px;
}
.el-form-item .tk_coll_content .el-form-item {
    margin-bottom: 18px !important;
}
/deep/ .tk_coll_content .el-form-item__label {
    color: #616c85 !important;
}
</style>

